import { View,Text,Input } from '@tarojs/components'
import { useState } from 'react'
import { AtButton, AtInput,AtInputNumber,AtIcon  } from 'taro-ui'
import './index.scss'
import Taro from '@tarojs/taro'
import { useRef } from 'react'
export default function BindAccount() {
  const [phoneNumber, setPhoneNumber] = useState('')
  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
  const [hasSendVerificationCode,setHasSendVerificationCode] = useState(false) // 是否发送了验证码
  const [countdown, setCountdown] = useState(30);
  const [codeArr,setCodeArr] = useState(['','','','']) // 验证码数组
  const [verificationInputRefs] = useState([useRef<any>(null),useRef<any>(null),useRef<any>(null),useRef<any>(null)]) // 验证码输入框数组

  function handleSendCode(){
    if(isButtonDisabled){
      return 
    }
    if(!phoneNumber){
      Taro.showToast({
        icon:'error',
        title:'请输入手机号'
      })
      return
    }

    setIsButtonDisabled(true);
    setHasSendVerificationCode(true)
    setCountdown(30);
    
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer);
          setIsButtonDisabled(false);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    
  }
  function codeChange(value ,index){
    // if(value.length > 1){
    //   codeArr[index] = value.slice(-1)
    // }else{
    //   codeArr[index] = value
    // }
    codeArr[index] = value
    console.log('value index:',value,index)
    
    setCodeArr([...codeArr])
    if(index < 3 && value!=='' && value!==undefined){
      if(verificationInputRefs[index+1].current){
        verificationInputRefs[index+1].current.focus()
      }
    }
    if(index === 3 && value!=='' && value!==undefined){
      Taro.showToast({
        icon:'success',
        title:'验证成功'
      })
      Taro.navigateTo({
        url:'/pages/merchantList/index'
      })
    }
  }
  function jumpBackPage(){
    if(isButtonDisabled){
      return
    }
    setHasSendVerificationCode(false)
  }
  return (
    <View className={['bind-container'].join('')} >
      <View className={['phone-screen',hasSendVerificationCode ? 'slideLeft':''].join(' ')}>
        <View className='title' style={{ alignItems: 'center', marginTop: 30 }}>
          查询积分商户
        </View>
          <View className='sub-title' style={{ flexDirection: 'row', alignItems: 'center',justifyContent: 'center', marginTop: 4 }}>
          <AtIcon size="10" value="alert-circle" className='at-icon'></AtIcon>可绑定全家人的积分账户哦！
        </View>
        <View className='input-wrap'>
          <AtInput
            type='number'
            name ='phoneNumber'
            placeholder='请输入手机号'
            value={phoneNumber}
            onChange={(value) => setPhoneNumber(String(value))}
            clear
            focus
            maxLength={11}

          />
          <View className='send-btn h3' onClick={handleSendCode}>
            {isButtonDisabled ? `已发送(${countdown})` : '发 送 验 证 码'}
          </View>
        </View>
      </View>
      {/* 输入验证码 */}
      <View className={['verification-code-screen',hasSendVerificationCode ? '':'slideRight'].join(' ')}>
        <View className='code-screen-title'>
          <Text>输入验证码</Text>
        </View>
        <View className='code-input-list'>
          {
            codeArr.map((codeItem,index)=>{
              return <View className='code-input-item'>
                <Input
                  className='at-input'
                  ref={verificationInputRefs[index]}
                  type='number'
                  value={codeItem}
                  onInput	={(event) => codeChange(event.detail.value,index)}
                  maxlength={1}
                  focus={index === 0}
                />
              </View>
            })
          }
        </View>
        <View className='code-screen-tip' onClick={jumpBackPage}>
          <Text>{isButtonDisabled ? `已发送(${countdown})秒` : '返回'}</Text>
        </View>
        
      </View>
      
      
        
      
    </View>
  )
}